<template>
  <div>
    <mt-header :title="newsData.title">
      <router-link :to="{name: 'm-home'}" slot="left">
        <mt-button>首页</mt-button>
      </router-link>
    </mt-header>
    <div class="article">
      <div class="title">{{newsData.title}}</div>
      <div class="desc">{{newsData.desc}}</div>
      <div class="details" v-html="newsData.detail"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {Toast} from "mint-ui";

export default {
  name: "MNewsShow",
  data() {
    return {
      newsData: {}
    }
  },
  async created() {
    try {
      const { data } = await axios({
        method: 'GET',
        url: `http://localhost:3000/news/${this.$route.params.id}`
      })
      this.newsData = data
    } catch (e) {
      Toast({
        message: '网络错误',
      });
    }
  }
}
</script>

<style lang="less" scoped>
  .mint-header {
    height: 1rem;
  }

  .article {
    padding: .2rem;

    .title {
      font-size: 1rem;
    }

    .desc {
      font-size: .5rem;
    }
  }
</style>
